<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
    </style>
</head>

<body>
    <script>
        document.addEventListener("click", function (e) {
            /* 
              clientX和clinetY:鼠标相对于浏览器可视区域的x,y坐标  
            */
            console.log("clientX " + e.clientX);
            console.log("clientY " + e.clientY);//尽管整个高度为2000px，但是这个y坐标也只是相对于浏览器的可视区域的部分的坐标

            /* 
                pageX和pageY：鼠标相对于document文档页面的x,y坐标.
            */
            console.log("pageX " + e.pageX);
            console.log("pageY " + e.pageY);//这个坐标是相对于整个页面文档的

            /* 
                screenX和screenY：鼠标相对于电脑屏幕的x,y坐标.
             */
            console.log("screenX " + e.screenX);
            console.log("screenY " + e.screenY);
        })
    </script>
</body>

</html>